<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>${topic.title }</title>
<jsp:include page="/WEB-INF/public/jquery-header.jsp"></jsp:include>
<jsp:include page="/WEB-INF/public/bootstarp-header.jsp"></jsp:include>
<jsp:include page="/WEB-INF/public/ueditor-header.jsp"></jsp:include>
</head>
<style>
.content{
	margin-top: 30px;
}
.mixtitle{
	color: #999;
	font: normal 15px/25px Helvetica, Tahoma, Arial, sans-serif;
}
.replyuserhead{
	width: 70px;
}
.replyuserhead img{
	width: 50px;
}
.replyname{
	font-size: 15px;
	font-family: "微软雅黑";
}
.replytime{
	color: #999;
	font: normal 13px/25px Helvetica, Tahoma, Arial, sans-serif;
}
</style>
<script type="text/javascript">
function review(tid){
	var content = $("#review").val();
	if(content == ""){
		alert("请填写评论内容！！！");
		return ;
	}
	$.post("${pageContext.request.contextPath}/topic/review", {
		content:content,tid:tid
	}, function(data) {
		alert(data.msg);location.reload();
	});
}
function replyme(id){
	var content = $("#reply"+id+" textarea").val();
	$.post("${pageContext.request.contextPath}/topic/reply", {
		content:content,pid:id
	}, function(data) {
		alert(data.msg);
		location.reload();
	});
}
function showreplyme(obj,id){
	if($("#reply"+id).html() == undefined){
		$("<div id='reply"+id+"'><textarea rows='4' style='width: 100%;' name='replyme' id='reply' placeholder='有什么感想，你也来说说吧！'></textarea>"+
		"<button class='btn btn-primary' onclick='replyme("+id+")'>回复</button><div>").appendTo(obj.parentNode);
	}else{
		$("#reply"+id).remove();
	}
}
function replymetoo(rid,pid){
	var content = $("#r"+rid+"p"+pid+" textarea").val();
	$.post("${pageContext.request.contextPath}/topic/reply_me", {
		content:content,pid:pid,rid:rid
	}, function(data) {
		alert(data.msg);
		location.reload();
	});
}
function showreplymetoo(obj,rid,pid){
	if($("#r"+rid+"p"+pid).html() == undefined){
		$("<div id='r"+rid+"p"+pid+"'><textarea rows='4' style='width: 100%;' name='replyme' id='reply' placeholder='有什么感想，你也来说说吧！'></textarea>"+
		"<button class='btn btn-primary' onclick='replymetoo("+rid+","+pid+")'>回复</button><div>").appendTo(obj.parentNode);
	}else{
		$("#r"+rid+"p"+pid).remove();
	}
}
imgUrls = [];
$(function (){
    var imgs = $(".BlogContent img");
    for(var i=0;i<imgs.length;i++){
        imgs[i].id = i;
        imgUrls["img"+i] = imgs[i].src;
    }
    //反防盗链
    fun1();
});
    function fun1(){
        var imgs = $(".BlogContent img");
        for(var i=0;i<imgs.length;i++){
            imgs[i].src = "http://imgsrc.2333.me/"+imgUrls["img"+imgs[i].id];
        }
    }
    function fun2(){
        var imgs = $(".BlogContent img");
        for(var i=0;i<imgs.length;i++){
            $(imgs[i]).attr("src","http://imgsrc.2333.me/"+imgUrls["img"+imgs[i].id]);
        }
    }
    function fun3(){
        var imgs = $(".BlogContent img");
        for(var i=0;i<imgs.length;i++){
            $(imgs[i]).attr("src",imgUrls["img"+imgs[i].id]);
        }
    }
</script>
<body>
	<jsp:include page="/WEB-INF/public/head.jsp"></jsp:include>
	<!--文章主题内容   -->
	<div class="row">
	<div class="col-md-7 col-md-offset-1 content">
		<h2 class="page-header">${topic.title }</h2>
		<h4 class="mixtitle">发表于${topic.date }&nbsp;&nbsp;|&nbsp;&nbsp;${topic.countReview }条评论&nbsp;&nbsp;|&nbsp;&nbsp;浏览量：${topic.pv}&nbsp;&nbsp;|&nbsp;&nbsp;作者:${topic.authorName }</h4>
		<p>${topic.content }</p>
        <h4 class="mixtitle">
            <button class="btn btn-primary" onclick="fun3()">恢复原连接</button>
            <button class="btn btn-primary" onclick="fun1()">反防盗链1</button>
            <button class="btn btn-primary" onclick="fun2()">反防盗链2</button>
        </h4>
        <h4>给您推荐：</h4>
        <c:forEach items="${recommenderList}" var="itm">
            <a href="${pageContext.request.contextPath}/topic/borwse?tid=${itm.id}">${itm.title}</a><br/>
        </c:forEach>
	</div>
	</div>
	<!--回复内容   -->
	<div class="row">
	<div class="col-md-7 col-md-offset-1 content">
		<div class="col-md-2 replyuserhead">
			<img src="http://avatar.csdn.net/C/4/5/3_wang_kun.jpg">
		</div>
		<div class="col-md-10">
			<textarea rows="4" style="width: 100%;" name="review" id="review" placeholder="有什么感想，你也来说说吧！"></textarea>
			<button class="btn btn-primary" onclick="review(${topic.id })">发表评论</button>
		</div>
	</div>
	</div>
	<div class="row">
	<div class="col-md-7 col-md-offset-1 content">
		<h3 class="page-header">已有${topic.countReview }条评论</h3>
		<div>
			<s:iterator value="replylist" var="itm">
				<div class="row" style="margin-top: 5px">
					<div class="col-md-2 replyuserhead">
						<img src="${pageContext.request.contextPath }<s:property value='user.head'/>">
					</div>
					<div class="col-md-10">
						<div><span class="replyname"><s:property value='authorName'/></span>&nbsp;&nbsp;|
						&nbsp;&nbsp;<span class="replytime"><s:property value='date'/></span></div>
						<div><s:property value='content'/></div>
						<div class="replyme">
							<span style="float: right;" onclick="showreplyme(this,<s:property value='id'/>)">回复</span>
						</div>
					</div>
					<s:iterator value="replys">
						<div class="col-md-11 col-md-offset-1">
						<hr>
							<div class="col-md-2 replyuserhead">
								<img src="${pageContext.request.contextPath }<s:property value='user.head'/>">
							</div>
							<div class="col-md-10">
								<div><span class="replyname"><s:property value='authorName'/>回复：<s:property value='reviewUsername'/></span>&nbsp;&nbsp;|
								&nbsp;&nbsp;<span class="replytime"><s:property value='date'/></span></div>
								<div><s:property value='content'/></div>
							</div>
							<div class="col-md-10">
								<div class="replyme">
									<span style="float: right;" onclick="showreplymetoo(this,<s:property value='id'/>,<s:property value='#itm.id'/>)">回复</span>
								</div>
							</div>
						</div>
					</s:iterator>
					<div class="col-md-12">
						<hr>
					</div>
				</div>
			</s:iterator>
			<jsp:include page="/WEB-INF/public/page.jsp"></jsp:include>
		</div>
	</div>
	</div>
</body>
</html>
